function $(id){
	return document.getElementById(id);
}
window.onload=function(){

	//初始化布局
	set_position();

	//地区选择事件的绑定
	region_selection_bind_event();
	//翻页事件的绑定
	through_the_pages_bind_event();
	//院校特性事件的绑定
	characteristic_of_universities_bind_event();
	//专业目录列表事件的绑定
	subject_list_bind_event();
	//搜索框事件的绑定
	search_bind_event();
	//表格事件的绑定
	table_bind_event();
	//专业名称列表事件的绑定
	professional_name_list_bind_event();

	//动态生成表格
	joint_paramaters_constitute_URL("",false,false,false,false);
}

//初始化位置布局
function set_position(){
	var width = document.body.clientWidth;
	var height = document.body.clientHeight;

	//设置input的位置
	var search = document.getElementById("search");
	search.style.left = Math.round(width*0.44)+'px';
	search.style.top =  '300px';
}

////////////////////////事件的绑定/////////////////////////////////////////
/////////////////////////表格相关事件开始////////////////////////////////////////////
//表格事件的绑定
function table_bind_event(){
	var trs = get_trs();
	for(var i=1; i<trs.length; i++){
		trs[i].onmouseover = trs_onmouseover;
		trs[i].onmouseout = trs_onmouseout;
	}
}
//表格中的鼠标悬浮离开事件
function trs_onmouseout(){
	var td;
	var tr;
	if(event.srcElement.tagName == "A"){
		td = event.srcElement.parentNode;
	}else {
		td = event.srcElement;
	} 
	tr = td.parentNode;
	tr.style.backgroundColor  = 'white';
}
//表格中的行鼠标悬浮事件
function trs_onmouseover(){
	var td;
	var tr;
	if(event.srcElement.tagName == "A"){
		td = event.srcElement.parentNode;
	}else {
		td = event.srcElement;	
	}
	
	tr = td.parentNode;
	tr.style.backgroundColor  = '#808080';
}
//得到tr
function get_trs(){
	return document.getElementsByTagName("TR");
}

/////////////////////////表格相关事件结束/////////////////////////////////////////
/////////////////////////搜索框相关事件开始/////////////////////////////////
//搜索框事件的绑定
function search_bind_event(){
	var search = get_search();
	search.onkeydown = search_onclick;
}
//搜索框的回车事件
function search_onclick(){
	if(event.keyCode == 13){
		//获取搜索框中的内容，拼接URL然后发送请求
		var search = get_search();
		var keywords = search.value;
		// todo 这是一个链接
		var URL = "renderUniListbySearch.do?keywords="+keywords;
		
		send_request(URL);
		get_table().scrollIntoView();
	}
}
//得到搜索框
function get_search(){
	return document.getElementsByName("search")[0];
}
////////////////////////搜索框相关事件结束///////////////////////////////////////
//////////////////////////专业名称列表相关函数开始///////////////////////////
//专业名称列表事件的绑定
function professional_name_list_bind_event(){
	var professional_name_list = get_professional_name_list();
	professional_name_list.onchange = professional_name_list_onclick;
}
//专业名称列表的鼠标点击事件
function professional_name_list_onclick(){
	if(event.srcElement && event.srcElement.tagName== "SELECT"){
		/*
			得到当前选中的专业名称
			拼接URL发送请求，得到返回的数据
			删除原来的表格
			将返回的数据生成新的表格，并插入到应该存在的位置
			
		*/
		var professional_name_list = get_professional_name_list();
		var index = professional_name_list.selectedIndex;
		var professional_name = professional_name_list[index].value;
		//根据专业名称获得新的数据并生成新的表格，插入到页面中
		get_new_table_according_to_professional_name_and_insert_to_page(professional_name);
	}
}
//根据专业名称获得新的数据并生成新的表格，插入到页面中
function get_new_table_according_to_professional_name_and_insert_to_page(professional_name){
	// todo 这是一个链接
	var URL = "renderUniAndMaj.do?maj_name="+professional_name;
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{

			var txt = xmlhttp.responseText;
			//将每次返回的数据作为全局变量
		    obj = eval ("(" + txt + ")");
		    //将翻功能的标志设置为professional_catalogue，用来说明是由专业目录筛选过后生成的表格
		    page_number_mark = "professional_catalogue";
		    //得到数据要插入的位置
		    var position = get_data_insert_postion();
		    //删除旧的表格和翻页
		    del_old_table_and_page(position);
		    //算出极限页码数
		    page_limit_num = 0;
			if(obj.length % 16 != 0 ){
				page_limit_num  = parseInt(obj.length / 16)+1;
			}else {
				page_limit_num  = obj.length / 16;
			}

			//根据数据长度的不同分别对生成的表格进行操作，每一页最多显示16条数据
			if(obj.length <= 0){
				//生成要插入的数据
				var inner = '<b>对不起，没有查询到您所需要信息</b>';
				position.innerHTML = inner;

			}else if(obj.length<=16 && obj.length>0){
		    	//生成新的表格并插入到相应位置，因为数据设置了全局变量所以不用通过函数参数传递
		    	insert_new_table_according_to_number(0,obj.length,0,position);

			}else if(obj.length >16){
				//将前16条数据生成一个表格，并插入应该在的位置
				insert_new_table_according_to_number(0,16,1,position);
			}
		}
	}
	xmlhttp.open("GET",URL,true);
	xmlhttp.send();
}
//根据新的数据生成新的表格
//参数：开始数，结束数，当前页码数，要插入的位置
function insert_new_table_according_to_number(start,end,page_num,position){
	var inner = '<table>'+
				'<tr>'+
					'<th>院校代码</th>'+
					'<th>院校名称</th>'+
					'<th>所在地</th>'+
					'<th>院校隶属</th>'+
					'<th>院校特性</th>'+
					'<th>学科评估等级</th>'+
					'<th>专业详情</th>'+
				'</tr>';
	for(var i=start;i<end; i++){
		inner +=	'<tr>'+
					'<td>'+obj[i].uni_code+'</td>'+
					'<td><a href="page_two.html?uni_name='+obj[i].uni_name+'&details=2">'+obj[i].uni_name+'</a></td>'+
					'<td>'+obj[i].uni_location+'</td>'+
					'<td>'+obj[i].uni_subjection+'</td>'+
					'<td>'+obj[i].uni_characteristic+'</td>'+
					'<td>'+obj[i].maj_level+'</td>'+
					'<td><a href="page_two.html?uni_name='+obj[i].uni_name+'&details=1">详情</a></td>';
				inner += '</tr>'; 
	}
	inner += '<table>';
	//如果数据等于16条才显示翻页按钮
	if(page_num >0){
		inner += '<div class="page">'+
				'<div>'+
					'<img src="./img/page1.jpg" class="page_img" id="first_page">'+
					'<img src="./img/page2.jpg" class="page_img" id="previous_page">'+
					'<span id="page_num">'+page_num+'</span>'+
					'<img src="./img/page4.jpg" class="page_img" id="next_page">'+
					'<img src="./img/page5.jpg" class="page_img" id="last_page">'+
				'</div>'+
			'</div>';
	}
	//将新生成的表格插入到应该存在的位置
	position.innerHTML = inner;

	//翻页事件的绑定
	through_the_pages_bind_event();
	//表格事件的绑定
	table_bind_event();
}
//////////////////////////专业名称列表相关函数结束///////////////////////////
/////////////////////专业目录列表相关函数开始////////////////////////////
//专业目录列表的事件绑定
function subject_list_bind_event(){
	var subject_list = get_subject_list();
	subject_list.onchange = subject_list_onclick;
}
//专业目录列表的鼠标点击事件
function subject_list_onclick(){
	if(event.srcElement && event.srcElement.tagName == "SELECT"){
		/*	
			得到当前选中的专业目录
			拼接URL发送请求，将返回的数据插入到专业名称当中

			重新插入的细节：先删除再插入
			选择完第二个之后再插入后来设计的表格
		*/
		//得到当前选中的专业
		var subject_list = get_subject_list();
		var index = subject_list.selectedIndex;
		var subject = subject_list.options[index].value;

		//向后台发送请求，获取专业名称列表然后插入到页面中
		get_professional_name_list_and_insert_to_page(subject);
	}
}
//向后台发送请求，获取专业名称列表然后插入到页面中
function get_professional_name_list_and_insert_to_page(subject){
	// todo 这是一个链接
	var URL = "renderMajbySubject.do?maj_subject="+subject;
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			var txt = xmlhttp.responseText;
			//将返回的数据作为局部变量
		    var obj = eval ("(" + txt + ")");
		    //得到数据要插入的位置
		    var select = get_professional_name_list();
		    //删除已经存在的option
		    delete_options(select);
		    //生成新的option，并插入select中
		    insert_options(obj,select);
		}
	}
	xmlhttp.open("GET",URL,true);
	xmlhttp.send();
}
/*
	拼接成新的option，并插入select中
	参数： obj 返回来的option数据
 		  select 数据要插入的位置		
*/
function insert_options(obj,select){
	var inner;
	for (var i = 0; i < obj.length; i++) {
		inner += '<option value="'+obj[i]+'">'+obj[i]+'</option>';
	}
	select.innerHTML = inner;
}	

//删除已经存在的option
function delete_options(select){
	var options = select.children;
	for (var i = options.length-1; i >= 0; i--) {
		select.removeChild(options[i]);
	}
}
//得到专业名称列表
function get_professional_name_list(){
	return document.getElementsByName("professional_name_list")[0];
}
//得到专业目录列表
function get_subject_list () {
	return document.getElementsByName("subject_list")[0];
}
/////////////////////专业目录列表相关函数结束////////////////////////////
//地区选择事件绑定函数
function region_selection_bind_event(){
	var regions = getAll_region();
	for (var i = 0; i < regions.length; i++) {
		regions[i].onclick = onclick_region;
		regions[i].onmouseover = onmouseover_region;
	}
}
//翻页事件绑定函数
function through_the_pages_bind_event() {
	var first_page = document.getElementById("first_page");
	var previous_page = document.getElementById("previous_page");
	var next_page = document.getElementById("next_page");
	var last_page = document.getElementById("last_page");
	//悬浮事件的绑定
	first_page.onmouseover = through_the_pages_onmouseover;
	previous_page.onmouseover = through_the_pages_onmouseover;
	next_page.onmouseover = through_the_pages_onmouseover;
	last_page.onmouseover = through_the_pages_onmouseover;

	//点击事件的绑定
	first_page.onclick = through_the_pages_onclick_first_page;
	previous_page.onclick = through_the_pages_onclick_previous_page;
	next_page.onclick = through_the_pages_onclick_next_page;
	last_page.onclick = through_the_pages_onclick_last_page;
}
//院校特性事件绑定函数
function characteristic_of_universities_bind_event(){
	//得到所有的院校特性
	var characteristic_collection = get_characteristic();
	//循环绑定点击事件
	for (var i = 0; i < characteristic_collection.length; i++) {
		characteristic_collection[i].onclick = characteristic_of_universities_onclick;
	}

}
//院校特性鼠标点击事件
function characteristic_of_universities_onclick(){
	get_parameters_of_region_selection_and_characteristic();		
}

//得到院校特性，返回的是一个HTML集合
function get_characteristic(){
	return document.getElementsByName("characteristic");
}


////////////////////////具体的事件////////////////////////////////////////////
//翻页鼠标悬浮事件
function through_the_pages_onmouseover(){
	if(event.srcElement && event.srcElement.tagName=="IMG"){
		var through_the_pages = event.srcElement;
		through_the_pages.style.cursor ='pointer';
	}
}
//地区选择鼠标悬浮事件
function onmouseover_region(){
	if(event.srcElement && event.srcElement.tagName=="SPAN"){
		var region = event.srcElement;
		region.style.cursor = 'pointer';
	}
}
//地区选择鼠标点击事件
function onclick_region(){
	if(event.srcElement && event.srcElement.tagName==="SPAN"){
		var region = event.srcElement;
		check_background_color_black();
		region.style.backgroundColor = '#000000';
		region.style.color = 'white';
		get_parameters_of_region_selection_and_characteristic();
	}
}
//检查地区选择中背景颜色是否有黑色，如果有，将背景颜色变白，字体变黑
function check_background_color_black(){
	var regions = getAll_region();
	for (var i = 0; i < regions.length; i++) {
		if(regions[i].tagName == "SPAN" && regions[i].style.backgroundColor=="rgb(0, 0, 0)"){
				regions[i].style.backgroundColor = 'white';
				regions[i].style.color = '#000000';	
		}
	}
}
////////////////////////多次调用的函数////////////////////////////////////////////////////
// 首页点击事件
function through_the_pages_onclick_first_page(){
	//得到当前页码数
	var page_num = parseInt(get_current_page_num());
	if(page_num === 1){
		alert("已经是第一页");
	}else {
		//得到新表格应该插入的位置
		var position = get_data_insert_postion();
		//删除原表格
		del_old_table_and_page(position);
		//插入新的表格从第0条数据到第16条数据
		if(page_number_mark == "professional_catalogue"){
			//由专业目录筛选出的表格
			insert_new_table_according_to_number(0,16,1,position);
		}else {
			create_new_table_according_to_number(0,16,1,position);	
		}
		
	}
}
// 上一页点击事件
function through_the_pages_onclick_previous_page(){
	//得到当前页码数
	var page_num = parseInt(get_current_page_num());
	//得到新的表格应该插入的位置
	var position = get_data_insert_postion();

	if(page_num-1 >= 1){
		//清除原来的表格
		del_old_table_and_page(position);
		//插入新的表格，判断是由哪种方式生成的表格
		if(page_number_mark == "professional_catalogue"){
			//由专业目录筛选出的表格
			insert_new_table_according_to_number((page_num-2)*16,(page_num-1)*16,page_num-1,position);
		}else {
			create_new_table_according_to_number((page_num-2)*16,(page_num-1)*16,page_num-1,position);
		}
		
	}
	else {
		alert("已经是第一页");
	}
}
//下一页点击事件
function through_the_pages_onclick_next_page(){
	//得到当前页码数
	var page_num = parseInt(get_current_page_num());
	//得到新的表格应该插入的位置
	var position = get_data_insert_postion();

	if(page_num+1 < page_limit_num){
		//清除原来的表格
		del_old_table_and_page(position);
		//插入新的表格，判断是由哪种方式生成的表格
		if(page_number_mark == "professional_catalogue"){
			//由专业目录筛选出的表格
			insert_new_table_according_to_number(page_num*16,(page_num+1)*16,page_num+1,position);
		}else {
			create_new_table_according_to_number(page_num*16,(page_num+1)*16,page_num+1,position);		
		}
		
		//更新页码数
		// page_num.innerText = page_number+1;
	}else if(page_num+1 == page_limit_num){
		//清除原来的表格
		del_old_table_and_page(position);
		//插入新的表格，判断是由哪种方式生成的表格
		if(page_number_mark == "professional_catalogue"){
			//由专业目录筛选出的表格
			insert_new_table_according_to_number(page_num*16,obj.length,page_num+1,position);
		}else {
			//由地区选择和院校特性筛选后生成的新的表格
			create_new_table_according_to_number(page_num*16,obj.length,page_num+1,position);	
		}
		
	}else {
		alert("已经是最后一页");
		// showTips("已经是最后一页",700,1);
	}
}
//末页点击事件
function through_the_pages_onclick_last_page(){
	//得到当前页码数
	var page_num = parseInt(get_current_page_num());
	//如果当前已经是最后一页则提示已经是最后一页
	if(page_num == page_limit_num){
		alert("已经是最后一页");
	}else {
		//得到新的表格应该插入的位置
		var position = get_data_insert_postion();
		//清除原来的表格
		del_old_table_and_page(position);
		//插入新的表格
		if(page_number_mark == "professional_catalogue"){
			//由专业目录筛选出的表格
			insert_new_table_according_to_number((page_limit_num-1)*16,obj.length,page_limit_num,position);
		}else {
			create_new_table_according_to_number((page_limit_num-1)*16,obj.length,page_limit_num,position);	
		}
		
	}	
}
//得到各个参数
function get_parameters_of_region_selection_and_characteristic(){
	
	//地区选择有关城市的参数
	var regions = getAll_region();
	var city = "";
	
	for (var i = 0; i < regions.length; i++) {
		if(regions[i].style.backgroundColor == "rgb(0, 0, 0)"){
			city = regions[i].innerText;
		}
	}
	if(city == "全部"){
		city = "";
	}

	//院校特性的相关参数
	var characteristic_collection = get_characteristic();
	var is_985 = characteristic_collection[0].checked;
	var is_211 = characteristic_collection[1].checked;
	var is_graduate_school = characteristic_collection[2].checked;
	var is_self_line = characteristic_collection[3].checked;
	
	joint_paramaters_constitute_URL (city,is_985,is_211,is_graduate_school,is_self_line);
}
//根据参数拼接url
function joint_paramaters_constitute_URL (city,is_985,is_211,is_graduate_school,is_self_line) {
	// todo 这是一个链接
	var URL = "renderUniListbyFiltrate.do?city="+city;
	if(is_985){
		URL += "&is_985=true";
	}
	if(is_211){
		URL+= "&is_211=true";
	}
	if(is_graduate_school){
		URL+= "&is_graduate_school=true";
	}
	if(is_self_line){
		URL+= "&is_self_line=true";
	}
	//发送请求
	send_request(URL);
}
//根据传入的URL发送请求
function send_request(URL){
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			var txt = xmlhttp.responseText;
			//将每次返回的数据作为全局变量
		    obj = eval ("(" + txt + ")");
		    //将翻功能的标志设置为regional_selection_and_characteristic，用来说明是由地区选择和院校特性筛选过后生成的表格
		    page_number_mark = "regional_selection_and_characteristic";
		    //得到数据要插入的位置
		    var position = get_data_insert_postion();
		    //删除原本存在的表格和页码
		    del_old_table_and_page(position);
		    //算出极限页码数
		    page_limit_num = 0;
			if(obj.length % 16 != 0 ){
				page_limit_num  = parseInt(obj.length / 16)+1;
			}else {
				page_limit_num  = obj.length / 16;
			}

			//根据数据长度的不同分别对生成的表格进行操作，每一页最多显示16条数据
			if(obj.length <= 0){
				//生成要插入的数据
				var inner = '<b>对不起，没有查询到您所需要信息</b>';
				position.innerHTML = inner;

			}else if(obj.length<=16 && obj.length>0){
		    	//生成新的表格并插入到相应位置，因为数据设置了全局变量所以不用通过函数参数传递
		    	create_new_table_according_to_number(0,obj.length,0,position);

			}else if(obj.length >16){
				//将前16条数据生成一个表格，并插入应该在的位置
				create_new_table_according_to_number(0,16,1,position);
			}
		}
	}
	xmlhttp.open("GET",URL,true);
	xmlhttp.send();
}

//将新的数据拼接成一个新的表格插入到页面中
//参数：开始数、结束数、页码数、应该插入的位置 
function create_new_table_according_to_number(start,end,page_num,position){
	var inner = '<table>'+
				'<tr>'+
					'<th>院校代码</th>'+
					'<th>院校名称</th>'+
					'<th>所在地</th>'+
					'<th>院校隶属</th>'+
					'<th>院校特性</th>'+
					'<th>研究生院</th>'+
					'<th>自划线</th>'+
				'</tr>';
	for(var i=start;i<end; i++){
		inner +=	'<tr>'+
					'<td>'+obj[i].uni_code+'</td>'+
					'<td><a href="page_two.html?uni_name='+obj[i].uni_name+'&details=2">'+obj[i].uni_name+'</a></td>'+
					'<td>'+obj[i].uni_location+'</td>'+
					'<td>'+obj[i].uni_subjection+'</td>'+
					'<td>'+obj[i].uni_characteristic+'</td>';
					if(obj[i].uni_graduate_school == false){
						inner += '<td>否</td>';	
					}else {
						inner += '<td>是</td>';
					}
					if(obj[i].uni_self_line == false){
						inner += '<td>否</td>';	
					}else {
						inner += '<td>是</td>';
					}
				inner += '</tr>'; 
	}
	inner += '<table>';
	//如果数据等于16条才显示翻页按钮
	if(page_num >0){
		inner += '<div class="page">'+
				'<div>'+
					'<img src="./img/page1.jpg" class="page_img" id="first_page">'+
					'<img src="./img/page2.jpg" class="page_img" id="previous_page">'+
					'<span id="page_num">'+page_num+'</span>'+
					'<img src="./img/page4.jpg" class="page_img" id="next_page">'+
					'<img src="./img/page5.jpg" class="page_img" id="last_page">'+
				'</div>'+
			'</div>';
	}
	//将新生成的表格插入到应该存在的位置
	position.innerHTML = inner;

	//翻页事件的绑定
	through_the_pages_bind_event();
	//表格事件的绑定
	table_bind_event();
}


//删除表格和页码
function del_old_table_and_page(position){
	var position_children = position.children;
	for (var i = position_children.length-1; i >= 0; i--) {
		position.removeChild(position_children[i]);
	}
}

////////////////////////////得到资源的函数////////////////////////////////////
//得到当前页码数
function get_current_page_num(){
	return document.getElementById("page_num").innerText;
}
//得到所有的地区
function getAll_region(){
	return document.getElementsByName("region");
}
//得到表格
function get_table(){
	return document.getElementsByTagName("table")[0];
}
//得到数据要插入的位置
function get_data_insert_postion(){
	return document.getElementById("position");
}


///////////////////////////////////调用别人的函数/////////////////////////////////////////////
/*
  显示信息提示后自动关闭
  参数说明:
  content:要显示的内容
  height:距离窗口顶部的距离
  time:为多少秒之后关闭
*/
function showTips( content, height, time ){
	//窗口的宽度
  var windowWidth  = $(window).width();
  var tipsDiv = '<div class="tipsClass">' + content + '</div>';
 
  $( 'body' ).append( tipsDiv );
  $( 'div.tipsClass' ).css({
      'top'       : height + 'px',
      'left'      : ( windowWidth / 2 ) - 350/2 + 'px',
      'position'  : 'absolute',
      'padding'   : '3px 5px',
      'background': '#8FBC8F',
      'font-size' : 20 + 'px',
      'margin'    : '0 auto',
      'text-align': 'center',
      'width'     : '350px',
      'height'    : 'auto',
      'color'     : '#fff',
      'opacity'   : '0.8'
  }).show();
  setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}